<template>
  <navbar/>
  <div class="container main">
    <el-container>
      <el-main v-loading.fullscreen.lock="loading" style="padding: 0;margin-right: 20px;" >
        <ul>
          <li style="height: 50px;border:1px solid #E5E7EB;border-top-left-radius: 10px;border-top-right-radius: 10px;">
            <h5 style="padding: 15px;font-size: 1.125rem;font-weight: 400;color: #777777;">{{text}}</h5>
          </li>
          <!-- 使用v-for循环将文章数据展示在前台 -->
          <li class="forLi" v-for="i in paginationResults" @click="liClick(i.report_id)" style="height: 100px;border:1px solid #E5E7EB;border-top: none;">
            <div style="display: grid;grid-template-columns: 1fr 9fr;padding-right: 30px;">
              <el-avatar :size="60" :src="i.user_img" style="margin:20px"/>
              <div class="top-text" style="display: grid;grid-template-rows:1fr 1fr;padding-top: 25px;padding-bottom: 20px;">
                <div style="display: grid;grid-template-columns:1fr 15fr;padding-bottom: 2px;">
                  <el-tag>{{i.tag[0]}}</el-tag>
                  <span style="font-size: 18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{i.title}}</span>
                </div>
                <div class="bottom-text" style="width:800px;padding-top: 2px;">
                  <span style="font-size: 14px;">
                    <el-icon style="margin-top: 7px;"><User /></el-icon>
                    {{i.editor}}
                  </span>
                  <span style="font-size: 14px;">
                    <el-icon style="margin-top: 7px;"><Star /></el-icon>
                    {{i.like}}
                  </span>
                  <span style="font-size: 14px;">
                    <el-icon><Clock /></el-icon>
                    {{i.time}}
                  </span>
                </div>
              </div>
            </div>
          </li>
          <!-- 分页 -->
          <li style="height: 60px;border:1px solid #E5E7EB;border-top: none;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;">
            <div style="padding: 10px;">
              <el-config-provider :locale="locale">
                <el-pagination
                  v-model:currentPage="currentPage"
                  :page-size="13"
                  :background="true"
                  layout="total, prev, pager, next"
                  :total="total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </el-config-provider>
            </div>
          </li>
        </ul>
      </el-main>
      <el-aside width="25%">
        <ul>
          <li style="height: 50px;border:1px solid #E5E7EB;border-top-left-radius: 10px;border-top-right-radius: 10px;">
            <h5 style="padding: 15px;font-size: 1.125rem;font-weight: 400;color: #777777;">社区动态</h5>
          </li>
          <!-- 使用v-for循环将文章数据展示在前台 -->
          <li style="height: 400px;border:1px solid #E5E7EB;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;"></li>
        </ul>
      </el-aside>
    </el-container>
  </div>
  <!-- 返回顶部组件 -->
  <el-backtop :right="50" :bottom="50" />
</template>

<script setup>
import { ref , onMounted } from 'vue'
import { useRouter , useRoute } from 'vue-router'
import navbar from '@/components/navbar.vue'
import '/node_modules/element-plus/theme-chalk/el-pagination.css'
import { putreport , getUser , select} from '@/api/system.js'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// 将element组件设置为中文
const locale = ref(zhCn)
// data
const router = useRouter()
const route = useRoute()
const currentPage = ref(1)
const total = ref(0)
const paginationResults = ref()
const loading = ref(false)
const userInfo = ref()
const searchInfo = ref()
const text = ref()
// methods
const liClick = (i) => {
  console.log(i);
  router.push({ path: 'content', query: { reportId: i }})
}
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  console.log(val)
}
const handleCurrentChange = (val) => {
  page = val,
  getSearchInfo(page)
}
const getUserInfo = () => {
  if(localStorage.getItem("userId")){
    const userId = localStorage.getItem("userId")
    const data = {
      id: userId
    }
    getUser(data).then((res) =>{
      userInfo.value = res.data[0]
      console.log(userInfo.value);
    })
  }
}
const data = {
  page:1,
}
// 挂载后
onMounted(() => {
  getSearchInfo(1)
  getUserInfo()
})
const getSearchInfo = (page) => {
  if(route.query.searchInfo){
    text.value = '搜索结果'
    loading.value = true
    searchInfo.value = route.query.searchInfo;
    console.log(route.query.searchInfo);
    const data = {
      message: searchInfo.value,
      page: page
    }
    //查询api
    select(data).then((res) => {
      console.log(res)
      paginationResults.value = res.data
      console.log(paginationResults.value);
      //配置分页器
      total.value=res.count
      loading.value = false
    })
  }
}
</script>

<style lang="scss" scoped>
ul{
  padding: 0;
  li{
    list-style: none;
    background-color: #fff;
  }
}
.main{
  margin-top: 90px;
  margin-bottom: 30px;
  width: 100%;
  padding: 0;
}
.top-text{
  span{
    margin-left: 10px;
  }
}
.bottom-text span{
  padding-right: 10px;
  color:#999999
}
.forLi{
  transition-duration: 0.3s;
}
.forLi:hover{
  cursor: pointer;
  background-color: #efefef;
  transition-duration: 0.3s;
}
</style>